<template>
  <Nav_bar :isLeftArrow="false" :title="'交易数据'" />
  <div class="ivestorTradingDataBox">
    <Data_presentation_box
      v-for="(item, index) in months_weeks_days"
      :key="item.salesText"
      :item="item"
      @click="skip(index)"
    />
    <div class="weeklyActiveUsersBox">
      <div class="chartBox" ref="chartRef"></div>
      <span class="_title">浏览量</span>
      <span class="_number">{{ clickDataText || 0 }}</span>
    </div>
  </div>
  <Tabbar />
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import * as echarts from 'echarts/core'
import { GridComponent } from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { useRouter } from 'vue-router'
import {
  getStatisticalSalesApi,
  getWeeklyActivityApi,
} from '@/api/ivestorTradingData/ivestorTradingData'
import { getWeeksNumber } from '@/utils/getWeeksNum'
import { accMul } from '@/utils/tools'
import { useUserInfoStore } from '@/stores'
import { getDictMultipleApi } from '@/api/dict'
const userInfoStore = useUserInfoStore()

echarts.use([GridComponent, BarChart, CanvasRenderer])
const $router = useRouter()
/** 上面循环盒子的list */
const months_weeks_days = ref([
  {
    salesText: '月销售额(元)',
    deal: '月成交笔数(单)',
    transactionNum: '月成交商品数(份)',
    marketMoney: 0,
    orderCount: 0,
    comboNum: 0,
  },

  {
    salesText: '周销售额(元)',
    deal: '周成交笔数(单)',
    transactionNum: '周成交商品数(份)',
    marketMoney: 0,
    orderCount: 0,
    comboNum: 0,
  },
  {
    salesText: '日销售额(元)',
    deal: '日成交笔数(单)',
    transactionNum: '日成交商品数(份)',
    marketMoney: 0,
    orderCount: 0,
    comboNum: 0,
  },
])
const clickDataText = ref(0)
const chartList = ref([0, 0, 0, 0])
const chartRef = ref()
const WeeksList = ref([])

onMounted(() => {})
/**
 * 跳转到投资人销售详情页
 * @param item
 */
const skip = (index) => {
  // console.log(item)
  $router.push({ path: '/ivestorSalesDetail', query: { index } })
}
const multiple = ref(4)
// 获取字典数据
const getDictMultiple = async () => {
  try {
    const res = await getDictMultipleApi()
    multiple.value = res?.data?.dictValue || 1
    console.log('multiple.value', multiple.value)
  } catch (error) {}
}
/** 获取销售的月/周/日销售情况 */
const getStatisticalSales = async () => {
  const res = await getStatisticalSalesApi()
  months_weeks_days.value[0].marketMoney = (
    res?.data.monthInfo.marketMoney - res?.data.monthInfo.refundMoney
  ).toFixed(2)
  months_weeks_days.value[0].orderCount = res?.data.monthInfo.orderCount
  months_weeks_days.value[0].comboNum = res?.data.monthInfo.comboNum

  months_weeks_days.value[1].marketMoney = (
    res?.data.weekInfo.marketMoney - res?.data.weekInfo.refundMoney
  ).toFixed(2)
  months_weeks_days.value[1].orderCount = res?.data.weekInfo.orderCount
  months_weeks_days.value[1].comboNum = res?.data.weekInfo.comboNum

  months_weeks_days.value[2].marketMoney = (
    res?.data.dayInfo.marketMoney - res?.data.dayInfo.refundMoney
  ).toFixed(2)
  months_weeks_days.value[2].orderCount = res?.data.dayInfo.orderCount
  months_weeks_days.value[2].comboNum = res?.data.dayInfo.comboNum
  // if (userInfoStore.userInfo.userId === 57) {
  months_weeks_days.value = months_weeks_days.value.map((i) => {
    return {
      ...i,
      marketMoney: accMul(i.marketMoney, multiple.value),
      orderCount: i.orderCount * multiple.value,
      comboNum: i.comboNum * multiple.value,
    }
  })
  // }
}
/**获取用户活跃度 */
const getWeeklyActivity = async () => {
  const res = await getWeeklyActivityApi()
  console.log(res)
  chartList.value = res?.data.map((item) => {
    return accMul(item.marketCount, multiple.value)
  })
  // if (userInfoStore.userInfo.userId === 57) {
  //   chartList.value = res?.data.map((item) => {
  //     return accMul(item.marketCount, 2)
  //   })
  // } else {
  //   chartList.value = res?.data.map((item) => {
  //     return item.marketCount
  //   })
  // }
  res?.data.forEach((item) => {
    clickDataText.value += item.marketCount
  })
  // if (userInfoStore.userInfo.userId === 57) {
  clickDataText.value = Number(clickDataText.value * multiple.value).toFixed(0)
  // }
}
/** echarts 图表 初始化 */
const echartsInit = () => {
  const myChart = echarts.init(chartRef.value)
  let option = {
    color: '#00B9EE',
    grid: {
      left: 50,
      top: 60,
      right: 45,
      bottom: 30,
    },
    xAxis: {
      type: 'category',
      data: WeeksList.value,
      axisLabel: {},
      nameLocation: 'end',
      name: '(周)',
      nameTextStyle: {
        color: '#C80000',
        fontSize: '10px',
      },
    },
    yAxis: {
      type: 'value',
      nameLocation: 'end',
      name: '(次)',
      nameTextStyle: {
        color: '#C80000',
        align: 'right',
        fontSize: '10px',
      },
    },
    series: [
      {
        data: chartList.value,
        type: 'bar',
        legendHoverLink: true,
        barWidth: 30,
      },
    ],
  }
  option && myChart.setOption(option)
  myChart.on('click', function (params) {
    clickDataText.value = Number(params.value).toFixed(0)
  })
}
/**获取到当前周数，并且添加到  echarts x轴需要的list中 */
const getWeeksList = () => {
  const currentWeekNum = getWeeksNumber()
  for (let i = 0; i < currentWeekNum; i++) {
    WeeksList.value.push(`第${i + 1}周`)
  }
  console.log(WeeksList.value)
}

onMounted(async () => {
  await getDictMultiple()
  await getWeeklyActivity()
  getStatisticalSales()
  echartsInit()
})
getWeeksList()
</script>

<style lang="scss" scoped>
.ivestorTradingDataBox {
  width: 100%;
  background-color: var(--defaultBgc);
  padding: 10px 15px 0;

  .weeklyActiveUsersBox {
    position: relative;
    width: 347px;
    height: 191px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.08);
    margin-bottom: 12px;
    .chartBox {
      width: 100%;
      height: 100%;
    }
    ._title {
      position: absolute;
      top: 10px;
      left: 8px;
      font-size: 14px;
      z-index: 999;
    }
    ._number {
      position: absolute;
      top: 16px;
      right: 34px;
      font-size: 14px;
      z-index: 999;
    }
  }
}
</style>
